<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/font/iconfont.css">
    <link rel="stylesheet" href="./css/userCard.css">
    <link rel="stylesheet" href="../assets/notice/notice.css">
    <link rel="stylesheet" href="../assets/nprogress/nprogress.css">
    <script src="../assets/notice/notice.js"></script>
    <script src="../assets/nprogress/nprogress.js"></script>
    <script src="../assets/axios/axios.js"></script>
    <script>
        const ERROR_MSG = {
            ECONNABORTED: "请求超时,请稍后重试",
            ETIMEDOUT: "网络异常,请检查网络连接",
            ERR_NETWORK: "网络异常,请检查网络连接"
        }
        const HTTP_MSG = {
            401: "未授权",
            403: "未授权",
            404: "您所访问的资源不存在",
            500: "服务器异常,请联系管理员",
            DEFAULT: "服务器忙,请稍后重试"
        }
        
        // 请求拦截器
        axios.interceptors.request.use(
            // 在网络请求发送前，进行请求配置处理的拦截方法 
            //          => 如果该方法 未将拦截的config配置项进行return 请求不会发送
            function(config){
                console.log("请求拦截器-请求配置[合并后的用于请求完整配置]",config)
                // 请求拦截的使用场景
                //      1、页面等待效果的开启[需要配置响应拦截器实现的]
                NProgress.start();
                //      2、授权配置的统一添加[ 部分服务器需要区分那些接口需要增相关配置 ]
                // config.headers = {}  // 拦截其中不能通过取值对象方式完成自定义头的设置
                // if(!config.url.endsWith("/login")){
                //     config.headers.Authorization = sessionStorage.getItem("token")
                // }
                if(!config.isPublic){
                    config.headers.Authorization = sessionStorage.getItem("token")
                }
                return config;
            },
            // 处理请求发送过程中，axios的相关配置错误 
            //      -> 新版本中不再进行定义
            //      -> 如果需要定义，方法内部代码固定 return Promise.reject(error)
            function(error){
                console.log("====>",error)
                return Promise.reject(error)
            }
        )
        
        axios.interceptors.response.use(
            function (response) {
                // 页面等待效果的关闭
                NProgress.done();
                return response.data
            },
            function (error) {
                // 页面等待效果的关闭
                NProgress.done();
                let title = "运行错误,请联系管理员";
                let icon = "error";
                if (error instanceof axios.AxiosError) {
                    let { status, code } = error.toJSON();

                    if (code == "ECONNABORTED") icon = "warning";

                    if (status) {
                        title = HTTP_MSG[status] || HTTP_MSG.DEFAULT;
                    } else {
                        title = ERROR_MSG[code];
                    }
                }

                notice({ icon, title })
                return Promise.reject(error);
            }
        )

        function login() {
            // 开启个性化等待
            axios.get("http://127.0.0.1:3000/api/login",{
                isPublic:true // 自定义属性 = 会被整合到配置中
            })
            .then(function (data) {
                console.log(data);
                sessionStorage.setItem("token", data.data.token)
            })
            .finally(function(){
                // 无论promise状态如何，在执行完成后必然调用的回调方法
                // 关闭个性化等待
            })
        }
        function sendUser() {
            axios.get("http://127.0.0.1:3000/user")
                .then(function (data) {
                    console.log(data);
                })
        }
    </script>
</head>

<body>
    <input type="button" value="login" onclick="login()">
    <hr>
    <input type="button" value="user" onclick="sendUser()">

</body>

</html>